@section('content')
<div class="m-product-divider"></div>
<div class="m-product">
	<div class="m-product-images">
		 @foreach($product->images as $img)
		<img alt="" src="{{Images::url($img->image)}}">
		@endforeach
	</div>
	<div class="m-product-detail"
    		data-id="{{$product->id}}" data-name="{{$product->name}}" data-enname="{{$product->enname}}" data-image="{{$product->image}}"
    		data-price="{{$product->discount_price > 0 ? $product->discount_price : $product->price}}"
    		data-postage_mode="{{$product->postage_mode}}">
    		<h2 class="brand">{{$product->brand or $product->enname}}</h2>
    		<h2 class="enname">{{$product->enname}}</h2>
    		<h3>{{$product->name}}</h2>
    		<div class="price-bar">
	    		@if($product->discount_price > 0)
		        	<span class="discount-price">¥{{number_format($product->discount_price,2)}}</span>
		        	<span class="price-line-through" style="margin-left: 1em;">¥{{number_format($product->price,2)}}</span>
		        @else
		        <span>¥{{number_format($product->price,2)}}</span>
		        @endif
    		</div>
    		@if (count($product->sizes) || count($product->colors))
    		<div class="list">
    			<!-- 规格尺寸 -->
	    		@if (count($product->sizes))
	    		<select class="m-product-szie" name="size" data-am-selected="{btnSize: 'xs',btnWidth:'100'}">
	    			<option value="-">请选择</option>
	    			@foreach($product->sizes as $size)
	    			<option value="{{$size->id}}">{{$size->size}}</option>
	    			@endforeach
	    		</select>
	    		@endif
	    		@if (count($product->colors))
	    		<select class="m-product-color" name="color" data-am-selected="{btnSize: 'xs',btnWidth:'100'}">
	    			<option value="-">请选择</option>
	    			@foreach($product->colors as $color)
	    			<option value="{{$color->id}}">{{$color->color}}</option>
	    			@endforeach
	    		</select>
	    		@endif
    		</div>
    		@else
    			<div style="height: 0.6rem;"></div>
    		@endif
    		<div class="m-product-toolbar">
    			@if ($product->quantity > 0 && !$product->deleted_at)
    			<button class="m-btn m-add-btn" id="m-add-product-btn">加入购物车</button>
    			<button class="m-btn m-btn-normal m-favorite-btn" id="m-favorite-product">加入收藏夹</button>
    			@else
    			<button class="m-btn m-add-btn" id="m-add-product-btn" disabled="disabled">SOLD OUT</button>
    			<button class="m-btn m-btn-normal m-favorite-btn" id="m-favorite-product">加入收藏夹</button>
    			@endif
    		</div>
    		@if(!empty($product->ext))
    		<div class="am-tabs m-product-tabs" data-am-tabs="{noSwipe: 1}">
			  <ul class="am-tabs-nav am-nav am-nav-tabs">
			    <li class="am-active"><a href="javascript: void(0)">商品描述</a></li><li><a href="javascript: void(0)">成分及保养</a></li><li><a href="javascript: void(0)">寄送与退货</a></li>
			  </ul>
			
			  <div class="am-tabs-bd">
			    <div class="am-tab-panel am-active">
			      {{$product->ext->content}}
			    </div>
			    <div class="am-tab-panel">
			      {{$product->ext->maintain}}
			    </div>
			    <div class="am-tab-panel">
			      {{$product->ext->returns}}
			    </div>
			  </div>
			</div>
			@endif
    	</div>
</div>
<div class="m-recommends-wrap">
	<div class="m-recommends">
		<p class="am-margin-top" style="font-size: 13px;margin-bottom: 8px;">您可能喜欢以下商品</p>
		<div class="am-g am-avg-md-4 am-thumbnails am-cf">
		 @foreach($recommends as $p)
		  <li>
		  	 <a href="{{URL::to('product',$p->id)}}" title="{{$p->name}}">
		      <img src="{{Images::url($p->image,450,540)}}" alt="{{$p->name}}" class="am-thumbnail"/>
		      <div>
		        <div class="brand">{{$p->brand}}</div>
		        <div>{{$p->name}}</div>
		      </div>
		    </a>
		  </li>
		@endforeach
		</div>
	</div>
	</div>
@stop

@section('script')
<script type="text/javascript">
<!--
$(function(){
	setTimeout(function(){
		$('.m-product-detail').affix({
			  offset: {
			    top: 150,
			    bottom: function () {
				  var cWidth = $('.m-recommends-wrap').outerWidth(true);
				  var icWidth = cWidth / 4;
				  var iWidth = icWidth - 16;//(16 = liPadding + imgPadding)
				  var iHeight = 540 / 450 * iWidth;
				  var bottom  = 16 + iHeight + $('.m-recommends-wrap').find(".am-margin-top").outerHeight(true) + 60 + $("#m-footer").outerHeight(true);
				  console.log("bottom="+bottom);
//	 			  var h = (this.bottom = $('.m-recommends-wrap').outerHeight(true) + 57);
//	 			  if (h < 446){
//	 				h = (this.bottom = 446)
//	 			  }
//	 		      return h;
				  return bottom;
			    }
			  }
			})
	},100);
	
});
//-->
</script>

@stop
